<!DOCTYPE html>
<html>
<head>   
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单管理</title>
    <meta name="keywords" content="用户管理">
    <meta name="description" content="用户管理">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__ADMIN__css/bootstrap.min.css" rel="stylesheet">
    <link href="__ADMIN__css/font-awesome.min.css" rel="stylesheet">
    <link href="__ADMIN__css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="__ADMIN__css/animate.css" rel="stylesheet">
    <link href="__ADMIN__css/style.css" rel="stylesheet">
    <link href="__ADMIN__js/plugins/layer/skin/default/layer.css" rel="stylesheet">
    <link href="__ADMIN__css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="__ADMIN__css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <style>
    #show img{width:60px; height: 60px; border-radius: 50%; box-shadow: 0 0 5px 1px #999;}
    .h10{height: 20px; }
    .modal-header{background: #3BB3A8; color: #fff;}
    #submit{ margin-right: 10px;}
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>菜单列表</h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="input-group">
                                <a href="javascript:addText();" class="btn btn-outline btn-primary cd-popup-trigger">添加菜单</a>
                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed" style="margin: 10px"></div>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>菜单名称</th>
                                <th>链接</th>
                                <th>状态</th>
                                <th>排序</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="show">
                                <volist name="list" id="vs">
                                    <tr>
                                        <td>{$vs.id}</td>
                                        <td>{$vs.html}{$vs.title}</td>
                                        <td>{$vs.link}</td>
                                        <td>
                                            <if condition="($vs.status eq 1)">
                                                <a href="javascript:Alterstate({$vs.id})" id="state{$vs.id}" class="label label-primary">正常</a>
                                            <else/>
                                                <a href="javascript:Alterstate({$vs.id})" id="state{$vs.id}" class="label label-danger">禁用</a>
                                            </if>
                                        </td>
                                        <td>{$vs.sort}</td>
                                        <td>
                                        <a href="javascript:addChildMenu({$vs.id});" class="label label-primary"><i class="fa fa-plus-square-o"></i>&nbsp;添加子菜单</a>&nbsp;&nbsp;&nbsp;&nbsp;
                                            <a href="javascript:edit({$vs.id});" class="label label-primary"><i class="fa fa-edit"></i> 修改</a>
                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                            <a href="javascript:del({$vs.id});" class="label label-danger"><i class="fa fa-trash"></i> 删除</a>
                                        </td>
                                    </tr>   
                                </volist>
                                </tbody>
                        	</table>                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

<div class="modal fade in" id="addText" style="display:none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">添加菜单</h4>
            </div>
            <div class="modal-body">
                <form action="{:U('Menu/save')}" method="post" id="form" name="form">
                    <div class="row">
                        <label class="col-sm-3 control-label" style="text-align:right; margin-top: 8px;padding-right: 0px">菜单名称：</label>
                        <div class="col-sm-6" style="padding-left: 0px;">
                            <input type="text" name="title" id="title" class="form-control" />
                        </div>
                    </div>
                    <div class="h10"></div>
                    <div class="row">
                        <label class="col-sm-3 control-label" style="text-align:right; margin-top: 8px;padding-right: 0px">链接名称：</label>
                        <div class="col-sm-6" style="padding-left: 0px;">
                            <input type="text" name="link" id="link" class="form-control" />
                        </div>
                    </div>
                    <div class="h10"></div>
                    <div class="row">
                        <label class="col-sm-3 control-label" style="text-align:right; margin-top: 8px;padding-right: 0px">排序：</label>
                        <div class="col-sm-6" style="padding-left: 0px;">
                            <input type="text" name="sort" id="sort" class="form-control" />
                        </div>
                    </div>
                    <div class="h10"></div>
                    <div class="row">
                        <label class="col-sm-3 control-label" style="text-align:right; margin-top: 8px;padding-right: 0px">状态：</label>
                        <div class="col-sm-6" style="padding-left: 0px;">
                            <input type="checkbox" name="status" id="status" value="1" class="js-switch" checked> 正常
                        </div>
                    </div>
                    <div class="h10"></div>
                    <div class="row">
                        <label class="col-sm-3 control-label" style="text-align:right; margin-top: 8px;padding-right: 0px"></label>
                        <div class="col-sm-6" style="padding-left: 0px;"> 
                             <button type="submit" class="btn btn-primary" id="submit">保存内容</button>
                             <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                    <div class="h10"></div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="__ADMIN__js/jquery.min.js"></script>
<script src="__ADMIN__js/bootstrap.min.js"></script>
<script src="__ADMIN__js/plugins/layer/layer.js"></script>
<script src="__ADMIN__js/plugins/switchery/switchery.js"></script>
<script src="__ADMIN__js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="__ADMIN__js/comment.js"></script>
<script>
var elem = document.querySelector('.js-switch');
var eid = 0 ,pid = 0;
function addText(){
    // eid = 0, pid = 0;//现将eid和pid清空一下
    $('#title').val('');//添加前需要将值都清空
    $('#link').val('');
    $('#sort').val('');
    $(elem).prop('checked',true).siblings().remove();
    var switchery = new Switchery(elem, { });
    $('#addText').modal({ });
};

$('#submit').click(function(){
    var title = $('#title').val();
    if(title == ''){
        comment.tips('菜单名称不能为空！','#title');
        return false;
    }
    var link = $('#link').val();
    if(link == ''){
        comment.tips('链接名称不能为空！','#link');
        return false;
    }
    //将form的input最为对象进行序列化数组
    var objName = $('#form').serializeArray();
    var dataName = new Object();
    $.each(objName,function(key,val){
        dataName[val.name] = val.value;
    });
    dataName['id'] = eid;
    dataName['pid'] = pid;
    $.post(
            $('#form').prop('action'),
            dataName,
            function(data){
                if(data.status < 1){
                    $('#addText').modal('hide');//回调函数返回值后将其遮罩层关闭
                    swal({title:"很遗憾", text:data.mess, type:"error"},function(){
                       window.location.reload();//刷新页面 
                    });
                }else{
                    $('#addText').modal('hide');//回调函数返回值后将其遮罩层关闭
                    swal({title:"恭喜你", text:data.mess, type:"success"},function(){
                       window.location.reload();//刷新页面  
                    });
                }               
            },
        'json');
    return false;//不让其跳转
});

function Alterstate(id){
    var idstr = '#state' + id;
    var objectstate = $(idstr);
    comment.status("{:U('Menu/Alterstate')}",id,objectstate);
}

function del(id){
    swal({   
        title: "主人确定要舍弃奴家吗？",  
        text: "",   
        type: "warning",   
        showCancelButton:true,   
        confirmButtonColor: "#ec6c62",   
        confirmButtonText: "果断舍弃！",   
        cancelButtonText: "让我想想！",   
        closeOnConfirm: false  
    },function(){   
        $.post("{:U('Menu/del')}",{id:id},function(data){
                if(data.status < 1){
                    swal({title:"很遗憾", text:data.mess, type:"error"});
                }else{
                    swal({title:"成功", text:data.mess, type:"success"},function(){
                       window.location.reload();//刷新页面 
                    });
                }
            },'json');
    });
}

function edit(id){
    $.post("{:U('Menu/getMenu')}",{id:id},function(data){
        if(data.status < 1){
            swal({title:"失败了！",text:data.mess,type:"error"});
        }
        eid = data.data[0].id;//返回的是二维数组，数组中有对象
        pid = data.data[0].pid;
        $('#title').val(data.data[0].title);
        $('#link').val(data.data[0].link);
        $('#sort').val(data.data[0].sort);
        $('#status').prop('checked',parseInt(data.data[0].status)?true:false);//为了动态的改变状态
        $(elem).siblings().remove();
        var switchery = new Switchery(elem, { }); 
        $('#addText').modal({ });
    });
}

function addChildMenu(id){
    pid = id;
    addText();
}

</script>
</body>
</html>